<template>
	<mescroll-uni  :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
		<view class="search_area">
			<view class="input_item">
				<view>
					<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/sousuo%402x.png"></image>
				</view>
				<input type="text" @tap="showItems()"   v-model="curWord"  placeholder="搜索商品" @input="changeName($event)" placeholderStyle="font-size:12px;font-family:PingFangSC-Regular,PingFangSC;font-weight:400;color:rgba(153,153,153,1);line-height:30px;" />
			</view>
			<view class="search_item" @tap="search_buttom()">搜索</view>
			<uni-popup :show="type === 'middle'" position="middle" mode="fixed" msg="请输入搜索内容" @hidePopup="togglePopup()" />
		</view>
		
		<view v-if="showType==='showTags'">
			<view class="text_area fl">搜索历史</view>
			<view @tap="clearKey" class="fr grace-more-r grace-search-remove">
				
			</view>
			
			<view class="items_area">
				<view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key='index' @tap='tagSearch(item)'>
					{{item}}
				</view>
			</view>
			
		</view>
		
		<pd-list :list="pdList" v-if="showType==='showLists'"></pd-list>
		
		<view v-if="showType==='showNoDate'" class="empty">
			暂无数据
		</view>
		
	</mescroll-uni>
	
</template>

<script>
	import http from 'common/http.js'
	import uniPopup from '../../../components/uni-popup/uni-popup.vue'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import PdList from "@/components/other/pd-list.vue";
	export default {
		components: {
			uniPopup,
			MescrollUni,
			PdList,
		},
		data() {
			return {
				showType: "showTags",
				type: "",
				searchKey: [],
				curWord: '',
				searchClose: true,
				listdata: [],
				mescroll: null, //mescroll实例对象
				downOption: {
					// use: false // 不使用下拉刷新
				},
				upOption: {
					// auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true
					 page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 12 // 每页数据的数量
					 },
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						tip: '~ 搜索无结果 ~' // 提示
					}
				},
				mockData:[],
				pdList: [], // 数据列表
				
			}
			
		},
		watch:{
			//关键词变化的时候,重置列表数据
			curWord(){
				// 重置列表数据 (tip:此处最好做节流,避免输入过快多次请求)
				this.mescroll.resetUpScroll();
			}
		},
		onShow() {
			var vv = uni.getStorageSync('searchLocal');
			if((vv!="")&&(vv!=undefined)){
				var arr = vv.split("-");
				this.searchKey = arr;
			}
		},
		onLoad() {},
		methods: {
			showItems() {
				this.showType = "showTags";
			},
			togglePopup(type) {
				this.type = type
			},
			clearKey: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '点击确定将删除所有历史信息，确定删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.searchKey = [];
							uni.setStorage({
								key: 'searchLocal',
								data: that.searchKey
							});
							
						} else if (res.cancel) {
			                       
						}
					}
				});
			
			},
			async search_buttom() {
				let keyWorld="";
				if (this.curWord == '') {
					uni.showToast({
						title: '未输入搜索关键字',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				//搜索列表数据
				let opts={
                        url: 'https://www.ujiaquan.com/store/api/zpmall-category/v1/goodss?&status=1&goodsNameForSearch='+encodeURI(this.curWord)+'&pageNum=1&pageSize=12',
                        method: 'GET'
                    };
                let param={};
                await http.httpTokenRequest(opts, param).then(res => { //接口请求成功处理数据
					 let json = eval(res);
					 let data = json.data;
					 let datas = data.data; 
                     if(datas==""){//数据为空
						this.showType = "showNoDate";//没数据
					}else{
						this.showType = "showLists";//展示数据列表
						this.listdata = datas;
					} 
					 return this.showType;
                    },error => {//接口请求失败
					console.log(error);
				})
				let newArr = this.searchKey;
				if(!newArr){//空
				    if((this.curWord!="")||(this.curWord!=undefined)){
				    	newArr.push(this.curWord);
				    	this.searchKey = newArr;
				    	keyWorld = newArr.join('-');
				    }
				}else{
					//判断输入值是否存在
					if(newArr.indexOf(this.curWord)==-1){
						if((this.curWord!="")||(this.curWord!=undefined)){
							newArr.push(this.curWord);
							keyWorld = newArr.join('-');
						}
					}
				}
				//搜索历史存入缓存中
				uni.setStorage({
					key: 'searchLocal',
					data: keyWorld
				});
			   var vv = uni.getStorageSync('searchLocal');
			},
			changeName(e){//监听输入框输入发生变化
				if((e.detail.value=="")||(e.detail.value==undefined)){
					this.showType = "showTags";
				}else{
					this.curWord = e.detail.value;
					this.showType = "showLists";//展示数据列表
					this.search_buttom();
				}
				
			},
		    tagSearch(e){//点击标签
				this.curWord = e;
				this.search_buttom();//调用methods中其他方法
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				mescroll.resetUpScroll()
			},
			
			upCallback(mescroll) {
				// 先清空列表,显示加载进度
				if(mescroll.num == 1) this.pdList = []; //如果是第一页需手动制空列表
				
				//联网加载数据
				this.getListDataFromNet(this.curWord, mescroll.num, mescroll.size, (curPageData)=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					mescroll.endSuccess(curPageData.length);
					//追加新数据
					this.pdList=this.pdList.concat(curPageData);
				}, () => {
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				})
			},
			async getListDataFromNet(curWord,pageNum,pageSize,successCallback,errorCallback) {
				//console.log("curWord"+curWord+ "####" +"pageNum"+pageNum+ "####" +"pageSize"+pageSize )
				try{
					var that=this;
					let data=[];
					let listData=[];
					let opts={
	                        url: 'https://www.ujiaquan.com/store/api/zpmall-category/v1/goodss?&status=1&goodsNameForSearch='+encodeURI(curWord)+'&pageNum='+pageNum+'&pageSize=12',
	                        method: 'GET'
	                    };
	                let param={};
	                await http.httpTokenRequest(opts, param).then(res => { //接口请求成功处理数据
							 let json = eval(res);
							 let data = json.data;
							 let datas = data.data; 
							 listData =datas;
	                },error => {//接口请求失败
							console.log(error);
					}) 
						//联网成功的回调
						successCallback && successCallback(listData);
					} catch (e) {
						//联网失败的回调
						errorCallback && errorCallback();
					}
				
			}
		},
	
	}
</script>

<style>
	page {
		background: rgba(255, 255, 255, 1);
		font-size:14px;
	}
	/*关键词搜索*/
	.item{
		padding: 20upx;
	}
	.tip{
		font-size: 30upx;
		vertical-align: middle;
	}
	.hot-word{
		font-size: 24upx;
		margin-left: 30upx;
		padding: 6upx 40upx;
		border: 2upx solid #FF6990;
		border-radius: 100upx;
		vertical-align: middle;
		color: #FF6990;
	}
	.word-input{
		display: inline-block;
		width: 60%;
		padding:4upx;
		font-size: 24upx;
		margin-left: 30upx;
		border: 2upx solid #18B4FE;
		border-radius: 60upx;
		text-align: center;
		background-color: #fff;
		vertical-align: middle;
	}
    .empty{
		width:100%;
		height:60px;
		float:left;
		font-size:1.1em;
		font-weight: 600;
		color:#979797;
		text-align: center;
		line-height:60px;
		padding-top:200upx;
	}
	.goodList {
		height: 100%;
		margin: 10px;
	}

	.content {
		var: (--status-bar-height);
		width: 100%;
		height: 100%;
	}

	.search_area {
		width: 100%;
		height: 40px;
		padding-top: 10px;
		display: flex;
		border-bottom: 1px #EEEEEE solid;
	}

	.input_item {
		width: 80%;
		height: 30px;
		margin-left: 10px;
		background: rgba(247, 247, 247, 1);
		border-radius: 15px;
		margin-right: 6px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.search_item {
		width: 46px;
		height: 30px;
		background: rgba(254, 67, 56, 1);
		border-radius: 4px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 30px;
		margin-right: 10px;
	}

	.text_area {
		width: auto;
		height: 36px;
		float:left;
		padding-left: 10px;
		line-height: 36px;
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	.searchHistoryBoxItem{
		margin-bottom:10px;
	}
	.fr{
		width:20px;
		height:20px;
		float:right;
		margin-right:3%;
		margin-top:8px;
		background:url(../../../static/del.png)no-repeat;
		background-size:100% 100%;
	}

	.items_area {
		width: 94.6%;
		height:auto;
		padding: 0 10px 0 10px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.items_area view {
		height: 27px;
		background: rgba(246, 246, 246, 1);
		border-radius: 13.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 27px;
		text-align: center;
		padding: 0 13px;
		margin-right: 7.5px;
	}

	.input_item view {
		width: 30px;
		height: 30px;
		margin-left: 7.5px;
		text-align: center;
	}

	.input_item view image {
		width: 16px;
		height: 16px;
		margin: 7px;
	}

	.input_item input {
		height: 30px;
		margin-left: 8px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
	}

	.goodItem {
		width: 100%;
		height: 120px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		border-bottom: 1px solid #EEEEEE;
	}

	.good_img {
		width: 100px;
		height: 100px;
		float:left;
		background-color: #F1F8FF;
		margin: 10px;
		
	}
	.imgSize{
		width:100%;
		height:100%;
		float:left;
		
	}

	.good_info {
		width: 60%;
		flex-wrap: wrap;
	}

	.good_tittle {
		width: 100%;
		height:auto;
		float:left;
		margin-top: 13px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 20px;
	}

	.good_price {
		margin-top: 6px;
		width: 100%;
		height: 20px;
		float:left;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 97, 14, 1);
		line-height: 20px;
	}
</style>
